<template>
  <div class="app-container">
    <!-- 页眉 -->
    <header class="app-header">
      <!-- 顶部信息栏 -->
      <div class="header-top-bar">
        <div class="container">
          <div class="top-info">
            <span class="date">{{ currentDate }}</span>
            <span class="weather">晴 25°C</span>
          </div>
          <div class="top-links">
            <a href="#" class="top-link">English</a>
            <a-divider type="vertical" />
            <a href="#" class="top-link">校园邮箱</a>
            <a-divider type="vertical" />
            <a href="#" class="top-link">图书馆</a>
            <a-divider type="vertical" />
            <a-button type="link" @click="goToAdmin" v-if="!isAdminPage" class="admin-link">管理入口</a-button>
            <a-button type="link" @click="goToHome" v-else class="admin-link">返回首页</a-button>
          </div>
        </div>
      </div>
      
      <!-- 主标题区域 -->
      <div class="header-main">
        <div class="container">
          <div class="logo-section">
            <div class="logo-container">
              <div class="logo-placeholder">
                <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="40" cy="40" r="38" fill="#1890ff" stroke="#fff" stroke-width="4"/>
                  <text x="40" y="48" text-anchor="middle" fill="white" font-size="24" font-weight="bold">大学</text>
                </svg>
              </div>
              <div class="title-section">
                <h1 class="university-name">工业大学</h1>
                <h2 class="site-title">新闻网</h2>
                <p class="university-english">University News Portal</p>
              </div>
            </div>
            <div class="search-section">
              <a-input-search
                v-model:value="searchValue"
                placeholder="请输入关键词搜索新闻"
                size="large"
                style="width: 300px"
                @search="onSearch"
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 导航菜单 -->
      <div class="nav-container" v-if="!isAdminPage">
        <div class="container">
          <a-menu
            v-model:selectedKeys="selectedKeys"
            mode="horizontal"
            theme="dark"
            class="main-nav"
          >
            <a-menu-item key="home">
              <router-link to="/">
                <home-outlined />
                首页
              </router-link>
            </a-menu-item>
            <a-menu-item key="important">
              <router-link to="/category/important">
                <flag-outlined />
                学校要闻
              </router-link>
            </a-menu-item>
            <a-menu-item key="academic">
              <router-link to="/category/academic">
                <book-outlined />
                学术动态
              </router-link>
            </a-menu-item>
            <a-menu-item key="general">
              <router-link to="/category/general">
                <global-outlined />
                综合新闻
              </router-link>
            </a-menu-item>
            <a-menu-item key="notice">
              <router-link to="/category/notice">
                <notification-outlined />
                通知公告
              </router-link>
            </a-menu-item>
          </a-menu>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="app-main">
      <div class="container">
        <router-view />
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-logo">
            <img src="./assets/images/logo.svg" alt="大学校徽" class="logo-small" />
            <span class="footer-title">大学新闻网</span>
          </div>
          <div class="footer-links">
            <div class="link-group">
              <h3>关于我们</h3>
              <a href="#">学校简介</a>
              <a href="#">联系方式</a>
            </div>
            <div class="link-group">
              <h3>快速链接</h3>
              <a href="#">学校官网</a>
              <a href="#">教务系统</a>
            </div>
            <div class="link-group">
              <h3>关注我们</h3>
              <a href="#">官方微博</a>
              <a href="#">官方微信</a>
            </div>
          </div>
        </div>
        <div class="copyright">
          © {{ new Date().getFullYear() }} 大学新闻网. 版权所有
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  HomeOutlined, 
  FlagOutlined, 
  BookOutlined, 
  GlobalOutlined, 
  NotificationOutlined 
} from '@ant-design/icons-vue'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()
const searchValue = ref('')
const currentDate = ref('')

// 更新当前日期
const updateCurrentDate = () => {
  currentDate.value = dayjs().format('YYYY年MM月DD日 dddd')
}

onMounted(() => {
  updateCurrentDate()
  // 每分钟更新一次时间
  setInterval(updateCurrentDate, 60000)
})

// 根据路由计算当前选中的菜单项
const selectedKeys = computed(() => {
  const path = route.path
  if (path === '/') return ['home']
  if (path.includes('/category/important')) return ['important']
  if (path.includes('/category/academic')) return ['academic']
  if (path.includes('/category/general')) return ['general']
  if (path.includes('/category/notice')) return ['notice']
  return []
})

// 判断是否在管理页面
const isAdminPage = computed(() => {
  return route.path.startsWith('/admin')
})

// 搜索功能
const onSearch = () => {
  if (searchValue.value.trim()) {
    router.push(`/search?keyword=${encodeURIComponent(searchValue.value.trim())}`)
  }
}

// 跳转到管理页面
const goToAdmin = () => {
  router.push('/admin/login')
}

// 跳转到首页
const goToHome = () => {
  router.push('/')
}
</script>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页眉样式 */
.app-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 顶部信息栏 */
.header-top-bar {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-info {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
  font-size: 12px;
}

.date, .weather {
  color: rgba(255, 255, 255, 0.9);
}

.top-links {
  display: flex;
  align-items: center;
  gap: 5px;
}

.top-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.top-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.admin-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
}

.admin-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 主标题区域 */
.header-main {
  padding: 20px 0;
  background-color: #fff;
}

.logo-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-section {
  display: flex;
  flex-direction: column;
}

.university-name {
  font-size: 32px;
  font-weight: bold;
  color: #1e3a8a;
  margin: 0;
  line-height: 1.2;
}

.site-title {
  font-size: 24px;
  font-weight: 600;
  color: #3b82f6;
  margin: 5px 0 0 0;
  line-height: 1.2;
}

.university-english {
  font-size: 14px;
  color: #6b7280;
  margin: 5px 0 0 0;
  font-style: italic;
}

.search-section {
  display: flex;
  align-items: center;
}

/* 导航菜单样式 */
.nav-container {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main-nav {
  border: none !important;
  background: transparent !important;
  line-height: 60px !important;
}

.main-nav :deep(.ant-menu-item) {
  color: #fff !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
  height: 60px !important;
  line-height: 60px !important;
  transition: all 0.3s ease;
}

.main-nav :deep(.ant-menu-item:hover) {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

.main-nav :deep(.ant-menu-item-selected) {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-bottom: 3px solid #fbbf24 !important;
}

.main-nav :deep(.ant-menu-item a) {
  color: #fff !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.main-nav :deep(.ant-menu-item-selected a) {
  color: #fff !important;
}

.main-nav :deep(.anticon) {
  font-size: 16px;
}

/* 主内容区样式 */
.app-main {
  flex: 1;
  padding: 30px 0;
  background-color: #f5f5f5;
}

/* 页脚样式 */
.app-footer {
  background-color: #003366;
  color: #fff;
  padding: 40px 0 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.footer-logo {
  display: flex;
  align-items: center;
}

.logo-small {
  height: 40px;
  margin-right: 10px;
}

.footer-title {
  font-size: 18px;
  font-weight: bold;
}

.footer-links {
  display: flex;
  gap: 60px;
}

.link-group h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #fff;
}

.link-group a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  transition: color 0.3s;
}

.link-group a:hover {
  color: #fff;
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
</style>